<template>
  <section style="border:1px solid #c3c3c3;padding:10px;">
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </section>

</template>

<script>
  import {
    debounce
  } from 'throttle-debounce'
  import * as echarts from 'echarts';
  import {
    xcflowGenerateRequestUrl
  } from '@/utils/xcflow';

  export default {
    props: {
      xcchart_base_xctitle: {
        type: Object
      },
      xcchart_prop_hidden: {
        type: Object
      },
      xcchart_layout_span: {
        type: Object
      },
      xcchart_data_dim: {
        type: Object
      },
      xcchart_data_facts: {
        type: Object
      },
    },
    watch: {
      'xcchart_layout_span': {
        handler(newVal, oldVal) {
          let that = this;
          that.myChart.resize();
        },
      },
      'xcchart_data_dim': {
        handler(newVal, oldVal) {
          let that = this;
          that.xinit();
        },
        deep: true,
      },
      'xcchart_data_facts': {
        handler(newVal, oldVal) {
          let that = this;
          that.xinit();
        },
        deep: true,
      },
    },
    data() {
      return {
        myChart: null,
        setOptionDebounce: debounce(340, this.setOption),
      }
    },
    mounted() {
      let that = this;
      that.xinit();
    },
    destroyed() {

    },
    methods: {
      xinit() {
        let that = this;
        const chartDom = this.$refs.chart;
        that.myChart = echarts.init(chartDom);
        that.setOptionDebounce(that.myChart)
      },
      setOption(myChart) {
        let that = this;
        let url = xcflowGenerateRequestUrl(this, "getXcchartOptions");
        let method = 'post';
        that.$axios({
          method,
          url,
          data: {
            xcchart_data_dim: that.xcchart_data_dim,
            xcchart_data_facts: that.xcchart_data_facts
          }
        }).then(resp => {
          let dimlables = resp.data.data.dimlables;
          let facts = resp.data.data.facts;

          let xAxis_data = dimlables;
          let series = [];
          for (let index in facts) {
            series.push({
              name: that.xcchart_data_facts['values'][index]['name'],
              type: that.xcchart_data_facts['values'][index]['type'],
              data: facts[index]
            });
          }

          const option = {
            title: {
              text: that.xcchart_base_xctitle.value
            },
            tooltip: {},
            xAxis: {
              data: xAxis_data
            },
            yAxis: {},
            series: series
          };
          myChart.setOption(option);
        });
      }
    },
  }
</script>
<style>
  .el {
    padding-left: 10px;
  }
</style>

<!--
        // const option = {
        //   title: {
        //     text: that.xcchart_base_xctitle.value
        //   },
        //   tooltip: {},
        //   xAxis: {
        //     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        //   },
        //   yAxis: {},
        //   series: [{
        //     name: '销量',
        //     type: 'bar',
        //     data: [5, 20, 36, 10, 10, 20]
        //   },{
        //     name: '销量2',
        //     type: 'bar',
        //     data: [5, 25, 16, 30, 20, 23]
        //   },{
        //     name: '销量3',
        //     type: 'bar',
        //     data: [5, 15, 13, 30, 20, 23]
        //   }]
        // };
        // that.myChart.setOption(option);
-->
